<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet"/>
    <link th:href="@{/css/my.css}" rel="stylesheet"/>

    <!--页面样式文件-->
    <link rel="stylesheet" th:href="@{/dist/css/main.css}">
    <link rel="stylesheet" th:href="@{/dist/css/media.css}">
</head>
<body class="bd-bg">
<!--右侧主体-->
<div class="order02-contentPart">
    <div class="order02-main">
        <!--搜索区域-->
        <div class="row rowNew">
            <div class="col-sm-12 search-area">
                <form id="formId">
                    <div class="select-list">
                        <ul class="ulForm clearfix">
                            <li class="select-time">
                                <label>选择时间： </label>
                                <div class="fl inputTime-outer">
                                    <input type="text" class="time-input" th:value="${beginTime}" id="startTime"
                                           placeholder="开始时间"
                                           name="params[beginPlanTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <span>--</span>
                                <div class="fl inputTime-outer">
                                    <input type="text" class="time-input" th:value="${endTime}" id="endTime"
                                           placeholder="结束时间"
                                           name="params[endPlanTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <div class="btn-outer fl">
                                    <a class="btn btn-primary mlr_8" onclick="reloadIt()"><i
                                            class="fa fa-search"></i>&nbsp;搜索</a>
                                </div>
                            </li>
                            <li class="btn-group">
                                <a class="thisYear btn btn-primary mlr_8">本年</a>
                                <a class="thisMonth btn btn-primary mlr_8">本月</a>
                                <a class="thisDay btn btn-primary mlr_8">本日</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
        <!--统计区域-->
        <div class="row rowNew">
            <div class="statistics-area02">
                <div class="statistics-list clearfix" id="orderStatistics">
                    <!-- <div class="statistics-item col-xs-6 col-sm-2 col-lg-2">
                         <div class="main color01 active">
                             <div class="indro">共计订单</div>
                             <div class="num">13858</div>
                         </div>
                     </div>-->    <!--statistics-item col-xs-6 col-sm-4 col-lg-2-->
                    <div class="statistics-item col-xs-6 col-sm-2 col-lg-2" th:each="milk,st:${list}">
                        <div th:id="${milk.type}" th:attr="index = *{st.index}"
                             th:class="'main color0'+ ${milk.class} ">
                            <div class="indro" th:text="${milk.key}"></div>
                            <div class="num"><span th:text="${milk.val}"></span><span class="unit"
                                                                                      th:if="${st.index == 0}">kg</span>
                            </div>
                        </div>
                    </div>
                    <!--<div class="statistics-item col-xs-6 col-sm-2 col-lg-2">
                        <div class="main color02">
                            <div class="indro">直供</div>
                            <div class="num">2566</div>
                        </div>
                    </div>
                    -->
                </div>
            </div>
        </div>
        <!--图表区域-->
        <div class="row rowNew tab-content">
            <div class="col-sm-4 left">
                <div class="echart-item">
                    <div id="leftMain" style="width:100%;height:410px;"></div>
                </div>
            </div>
            <div class="col-sm-8 right">
                <div class="filter-btn">
                    <a class="btn " id="yearBtn">年</a>
                    <a class="btn active" id="monthBtn">月</a>
                    <a class="btn" id="dayBtn">日</a>
                </div>
                <div class="echart-item ">
                    <div id="main" style="width:100%;height:410px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!--echart-->
<script th:src="@{/dist/libs/echarts/dist/echarts.min.js}"></script>

<!-- 遮罩层 -->
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/my-common-js.js}"></script>

<script type="text/javascript" th:inline="javascript">
    var ctx = [[@{
        /}]]
        var currentSortList = ['共计订单', '直供', '内销一', '内销二', '内销三', '内销四']
        var currentSort = '共计订单'
        var cforderType = 0;
        var timeSort = 2;//月份
        /**
         * 设置柱状图的数据(参数用于获取数据)
         * @param sortIdx:共计订单/直供/内销一/内销二
         * @param timeSort:年月日
         */
        function setBarData(sortIdx, timeSort, x, y) {
            // 调用方法获取数据
            var xData = [[${xDate}]];
            var yData = [[${sum}]];

            console.log(xData + "--" + yData)
            if (x && y) {
                xData = x;
                yData = y;
            }
            var myChart = echarts.init(document.getElementById('main'));
            var option01 = {
                title: {
                    text: '牛奶供应数量统计表',
                    x: 'center',
                    textStyle: {
                        fontSize: 32,
                        color: '#2d353e'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    textStyle: {
                        fontSize: 22
                    }
                },
                grid: {
                    top: '21%',
                    bottom: '7%',
                    left: '7%',
                    right: '5%'
                },
                xAxis: {
                    name: '月',
                    nameTextStyle: {
                        color: '#a1a4a8',
                        fontSize: 20,
                    },
                    data: xData,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#f3f6fa'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#a3abb4',
                            fontSize: 20,
                        }
                    },
                },
                yAxis: {
                    name: 'kg',
                    nameTextStyle: {
                        color: '#a1a4a8',
                        fontSize: 20,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#f3f6fa'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#f3f6fa'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#a3abb4',
                            fontSize: 20,
                        }
                    },
                },
                series: {
                    name: '重量',
                    type: 'bar',
                    barWidth: 18,
                    emphasis: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#4cb3db' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#3d7ee0' // 100% 处的颜色
                            }], false)
                        }
                    },
                    itemStyle: {
                        normal: {
                            barBorderRadius: [9, 9, 0, 0],
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#60c5ff' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#428af5' // 100% 处的颜色
                            }], false)
                        }
                    },
                    data: yData
                }
            };
            myChart.setOption(option01);
        }

        setBarData(currentSort, 'year')

        //本年月日
        $('.thisYear').click(function () {
            $('#startTime').val(new Date().getFullYear() + "-01-01");
            reloadIt();
        });

        $('.thisMonth').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            $('#startTime').val(new Date().getFullYear() + "-" + m + "-01");
            reloadIt();
        });
        $('.thisDay').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            $('#startTime').val(new Date().getFullYear() + "-" + m + "-" + new Date().getDate());
            reloadIt();
        });


        function reloadIt() {
            var link = ctx + "system/ncCowsMilk/selectMilkOutNew";
            var s = $('#startTime').val();
            var e = $('#endTime').val();

            link += "?beginTime=" + s + "&endTime=" + e;
            window.location.href = link;
        }


        $('#yearBtn').click(function () {
            timeSort = 1;
            $(this).addClass('active').siblings().removeClass('active')
            initEchart()
            // setBarData(currentSort, 'year')
        })


        $('#monthBtn').click(function () {
            timeSort = 2;
            $(this).addClass('active').siblings().removeClass('active')
            console.log(currentSort)
            initEchart()
            // setBarData(currentSort, 'month')
        })


        $('#dayBtn').click(function () {
            timeSort = 3;
            $(this).addClass('active').siblings().removeClass('active')
            initEchart();
            // setBarData(currentSort, 'day')
        })


        // 饼状图高亮下标
        var currentSortIndx = -1

        // 饼状图
        var myChart00 = echarts.init(document.getElementById('leftMain'));
        // 饼状图数据


        var pieData = [];
        var list = [[${list}]];
        console.log(list)
        for (var i = 1; i < list.length; i++) {

            var lists = {value: list[i].val, name: list[i].key}
            pieData.push(lists)
        }

        //  pieData=[{value:'2000', name:'直供'},
        // {value:'3000', name:'内销一'},
        // {value:'4000', name:'内销二'},
        // {value:'1000', name:'内销三'},
        // {value:'1200', name:'内销四'},]

        var option00 = {
            legend: {
                orient: "vartical",
                right: '4%',
                bottom: "16%",
                itemWidth: 20,
                itemHeight: 15,
                textStyle: {
                    fontSize: 16,
                    color: '#7c8b92'
                },
                itemGap: 15,
                selectedMode: false
            },
            title: {
                text: '牛奶供应数量比例图',
                x: 'center',
                textStyle: {
                    fontSize: 32,
                    color: '#2d353e'
                }
            },
            tooltip: {
                trigger: 'item',
                // formatter: "{a} <br/>{b}:({d}%)"
            },
            series: {
                name: '',
                type: 'pie',
                center: ['35%', '57%'],
                radius: ['42%', '76%'],
                color: ['#a781ff', '#5ad6ff', '#ffba60', '#749fff', '#8eff73'],
                label: {
                    normal: {
                        position: 'inner',
                        formatter: '{d}%',
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                itemStyle: { //图形样式
                    normal: {
                        borderColor: '#ffffff',
                        borderWidth: 2,
                    },
                },
                data: pieData
            }
        };
        myChart00.setOption(option00);

        $(".main").click(function () {
            $(".main").removeClass("active");
            $(this).addClass("active");
            if ($(this).attr('id') == "no") {
                return;
            }
            cforderType = $(this).attr("index");
            console.log(cforderType)
            initEchart();
            /*var link = '/system/ncCowsMilk/milkOrder?type=' + $(this).attr('id');

            var s = $('#startTime').val();
            var e = $('#endTime').val();
            link += "&beginTime=" + s + "&endTime=" + e
            $.modal.openTab("牛舍订单列表", link);*/
        });


        // 切换"共计订单"、"直供"
        $("#orderStatistics .statistics-item").each(function (index) {
            var _idx = index
            $(this).children(".main").eq(0).click(function () {

                currentSort = currentSortList[_idx]
                // 设置柱状图数据
                setBarData(currentSort, 'year')

                $(this).addClass("active").parent().siblings().children(".main").removeClass("active");

                // 饼状图高亮
                myChart00.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: currentSortIndx
                });
                if (_idx > 0) {
                    currentSortIndx = _idx - 1
                } else {
                    currentSortIndx = -1
                }
                myChart00.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: currentSortIndx
                });

            })
        })

        //检测鼠标移入后显示之前默认高亮的那块
        myChart00.on('mouseover', function (e) {
            // 移除默认高亮
            myChart00.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: currentSortIndx
            });
        })
        //检测鼠标移出后显示之前默认高亮的那块
        myChart00.on('mouseout', function (e) {
            // 移除所有高亮
            myChart00.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: option00.series.data.length
            });
            // 高亮选中部分
            myChart00.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: currentSortIndx
            });
        });
        initEchart();

        function initEchart() {
            var url = ctx + "system/ncCowsMilk/milkQuery";
            var data = {
                beginTime: $('#startTime').val(),
                endTime: $('#endTime').val(),
                dataSpan: timeSort,
                cforderType: cforderType
            };

            myPost(url, data, function (data) {
                if (data.code == 0) {
                    var x = [];
                    var y = [];
                    $(data.rows).each(function (i, e) {
                        x.push(e.x);
                        y.push(e.count);
                    });

                    setBarData(currentSort, 'year', x, y);
                }

            }, function () {

            })
        }
        setFrontTimeShortcutBtns([[${beginTime}]], [[${endTime}]]);
        setTitle("牛舍管理", false);

</script>
</body>
</html>
